<!-- 重点信息统计 -->
<script lang="ts" setup>
import { WhManagerBsTbDangerSourceCount,WhManagerBsTbDangerStatisticByLevel } from "@/genapi/wh_bak";
import { onMounted, ref } from "vue";
defineOptions({ name: 'MajorHazardSources' });

onMounted(() => {
  getdata()
})
let echartdata = ref([])
let sourcecount = ref('')
const getdata = async () => {
  let res = await WhManagerBsTbDangerSourceCount()
  // console.log(res)
  sourcecount.value = res.data
  let res2 = await WhManagerBsTbDangerStatisticByLevel()
  // console.log(res2)
  echartdata.value.push(res2.data.level1)
  echartdata.value.push(res2.data.level2)
  echartdata.value.push(res2.data.level3)
  echartdata.value.push(res2.data.level4)
  data.value = [
  {
    label: '一级',
    color: '#95F2D0',
    value: res2.data.level1+'/'+Number(res2.data.level1Percent).toFixed(1)+'%',
  },
  {
    label: '二级',
    color: '#17EAFE',
    value: res2.data.level2+'/'+Number(res2.data.level2Percent).toFixed(1)+'%',
  },
  {
    label: '三级',
    color: '#5EC9F9',
    value: res2.data.level3+'/'+Number(res2.data.level3Percent).toFixed(1)+'%',
  },
  {
    label: '四级',
    color: '#93E6F7',
    value: res2.data.level4+'/'+Number(res2.data.level4Percent).toFixed(1)+'%',
  },
]
}
const option = ref({
	color:[
     {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#95F2D0' 
        }, {
            offset: 1, color: '#5CE0A3' 
        }]
      },
      {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#17EAFE' 
        }, {
            offset: 1, color: '#009CD7' 
        }]
      },
      {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#5EC9F9' 
        }, {
            offset: 1, color: '#3099F0' 
        }]
      },
      {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#93E6F7' 
        }, {
            offset: 1, color: '#5AC8ED'
        }]
      }
        ],
	title: {
		text: "危险源等级占比",
		top: "45%",
		textAlign: "center",
		left: "49%",
		textStyle: {
			color: '#626E8B',
			fontSize: 14,
			fontWeight: "400",
		},
	},
	graphic: {
		elements: [
			{
				type: "image",
				z: 3,
				style: {
					width: 178,
					height: 178,
				},
				left: "center",
				top: "center",
				position: [100, 100],
			},
		],
	},
	tooltip: {
		show: false,
	},
	toolbox: {
		show: false,
	},
	series: [
		{
			name: "",
			type: "pie",
			clockWise: false,
			radius: [55, 70],
			hoverAnimation: false,
      padAngle: 2,
			itemStyle: {
				normal: {
					labelLine: {
						show: false,
					},
				},
			},
			data: echartdata.value,
		},
	],
});
const data = ref([
  {
    label: '一级',
    color: '#95F2D0',
    value: '15/47.5%',
  },
  {
    label: '二级',
    color: '#17EAFE',
    value: '15/47.5%',
  },
  {
    label: '三级',
    color: '#5EC9F9',
    value: '15/47.5%',
  },
  {
    label: '四级',
    color: '#93E6F7',
    value: '15/47.5%',
  },
]);
</script>

<template>
  <div bg="#fff" flex="~ col" p="x-30px y-24px">
    <div text="#303133 20px" font="bold">重大危险源统计</div>
    <div
      h="64px"
      flex="~ justify-between items-center"
      p="l-20px r-30px"
      m="t-24px"
      bg="[linear-gradient( 180deg, #EFF7FF 0%, rgba(239,247,255,0.1) 100%)]"
      text="#2572CC"
      font="bold"
    >
      <span text="18px">重大危险源数量</span>
      <span text="22px">{{sourcecount}}</span>
    </div>
    <div flex="1 ~ items-center justify-center">
      <BaseEchart :option="option"></BaseEchart>
    </div>
    <div grid="~ cols-2 gap-x-30px gap-y-20px">
      <div
        v-for="item in data"
        :key="item.label"
        h="40px"
        flex="~ items-center"
        b="#86B6C4/50 1px solid"
        rd="8px"
        p="x-15px"
        bg="#36D1F0/10"
        text="#3B445B"
        font="bold"
      >
        <span rd="4px" size="6px" :style="{ background: item.color }" />
        <span flex="1" p="x-14px">{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>
